import { useState } from 'react'
import './index.scss'
import Keep from '../../Drawdesigns/material/material-tab/keep/index'
import Recently from '../../Drawdesigns/material/material-tab/Recently/index'
import Recommend from './material-tab/recommend'
const Material=()=>{
    const [activeIndex,setactiveIndex]=useState(0)
    const tabs=[
        {name:'推荐素材',content:<Recommend/>},
        {name:'最近使用',content:<Recently/>},
        {name:'收藏',content:<Keep/>}
    ]
    const handleClick=(index)=>{
        setactiveIndex(index)
    }
    return ( 
        <div className="material">
            <div className='material_top'>
                <div className='seach'>
                    <span className='iconfont icon-sousuo'></span>
                    <input type='text' placeholder='搜索素材'></input>
                </div>
            </div>
            <div className='tabs'>
                {
                    tabs.map((item,index)=>{
                        return <div key={index} className={activeIndex === index ? 'active' : ''} onClick={() => handleClick(index)}>
                            <span>{item.name}</span>
                           
                        </div>
                    })
                }
            </div>
            <div className='tabbottom'>
                 {tabs[activeIndex].content}
            </div>
        </div>
    )
}
export default Material